<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,initial-scale=1.0,width=device-width" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>库存统计</title>
    <link rel="stylesheet" type="text/css" href="../../css/api.css" />
    <link rel="stylesheet" href="../../css/jqweui/lib/weui.min.css">
    <link rel="stylesheet" href="../../css/jqweui/css/jquery-weui.css">
    <link rel="stylesheet" href="../../css/jqweui/css/jqweui_extend.css">
    <link rel="stylesheet" href="http://at.alicdn.com/t/font_539359_q9xrtmlc8gp.css">
    <script src="../../script/plugins/jquery.min.js"></script>
    <script type="text/javascript" src="../../script/plugins/in/in-min.js"></script>
    <script type="text/javascript" src="../../css/jqweui/js/in-config.js"></script>
    <script src="../../css/jqweui/js/jquery-weui.js"></script>
    <script src="../../css/jqweui/js/util.js"></script>
    <script src="../../script/plugins/echarts/echarts.min.js"></script>
    <script src="../../script/plugins/echarts/theme/shine.js"></script>
</head>
<body class="wrap">
<section class="mc-view-box">
    <div class="mc-header-box">
        <div class="mc-header bg-black">
            <a href="javascript:;" onclick="utils.back();" class="head-icon">
                <i class="iconfont icon-arrow-left"></i>
            </a>
            <div class="main-box head-title text-left">
                库存统计
            </div>
            <a href="javascript:;" class="head-icon">
            </a>
        </div>
    </div>
    <div class="mc-scrollview bg-gray">
        <div class="m-d bg-white">
            <h3 class="p-d">库存成本<small class="pull-right">￥112,1020.00</small></h3>
            <div id="pie-box" style="width:100%;height:350px;"></div>
        </div>
        <div class="m-d bg-white">
            <h3 class="p-d text-center">库存单品</h3>
            <div id="bar-box" style="width:100%;height:350px;"></div>
        </div>

    </div>
</section>
<script type="text/javascript">
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('bar-box','shine'));
    var myChart2 = echarts.init(document.getElementById('pie-box','shine'));
    // 指定图表的配置项和数据
    var option1 = {
        tooltip: {},
        xAxis: {
            data: ["衬衫","羊毛衫","雪纺衫","裤子","高跟鞋","袜子",'四件套','枕芯','夏被','毛毯']
        },
        yAxis: {},
        series: [{
            name: '销量',
            type: 'bar',
            data: [5, 20, 36, 10, 10, 20, 35, 23, 46, 12]
        }]
    };
    var option2 = {
        tooltip : {
            trigger: 'item',
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        legend: {
            orient: 'vertical',
            left: 'left',
            data: ['衬衫','西裤','女装','饰品','家纺']
        },
        series : [
            {
                name: '品牌占比',
                type: 'pie',
                radius : '55%',
                center: ['50%', '60%'],
                data:[
                    {value:335, name:'衬衫'},
                    {value:310, name:'西裤'},
                    {value:234, name:'女装'},
                    {value:135, name:'饰品'},
                    {value:1548, name:'家纺'}
                ],
                itemStyle: {
                    emphasis: {
                        shadowBlur: 10,
                        shadowOffsetX: 0,
                        shadowColor: 'rgba(0, 0, 0, 0.5)'
                    }
                }
            }
        ]
    };

    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option1);
    myChart2.setOption(option2);

</script>
</body>
</html>